<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            background-color: aquamarine;
        }

        .container {
            width: 80%;
            height: 100vh;
            background-color: azure;
            margin: 0 auto;
            padding: 5%;
            box-sizing: border-box;
        }

        .main {
            background-color: bisque;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px 15px;
            color: aliceblue;
        }

        .main div {
            display: flex;

            /* justify-content: end; */
            /* 向主轴后面对齐 */
            /* align-items: flex-end; */
            /* 向交叉轴下面对其 */

            justify-content: center;
            align-items: center;
            flex-direction: column;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            /* background-size:contain ; */
            /* 保持原比例大小 */
            background-size: cover;
            /* 变换比例包含在内 */
            background-attachment: fixed;
            /* 实现一张图片分割 */
            /* transition-property: scale; */
            transition: all 0.5s ease-in-out;
            /* transition: text-shadow 0.2s ease; */
        }

        .main .te {
            background-image: url("./img/background1.png");
        }

        .main .te:hover {
            opacity: 0.8;
            cursor: pointer;
            /* 放缩处理 */
            transform: scale(0.98);
            /* transform: scale(1.2); */

            /* 文字发光, 很不明显 */
            text-shadow: black 10px 10px 10px;
        }

        .main .test8 {
            background-image: none;
            background-color: aquamarine;
            transition: filter 1s ease 0s;
        }

        /* 图像模糊处理 */
        .main .test8:hover {
            filter: blur(2px);
        }

        .main .test5 {
            background-image: none;
            background-color: blueviolet;
            /* 图像旋转 rotateX前后翻转 rotateY向右旋转 rotateZ平面旋转  rotate3d 3d旋转类似空翻 rotate默认为rotateZ*/
            /*(移动方向是旋转后相对于图片的方向) translateX +向右-向左 translateY +向下-向上移动 translateZ 向轴正向移动(移向屏幕外) 在设置rotateZ的时候该属性无效*/
            transition: all 1s ease-in-out;
        }

        .main .test5:hover {
            transform: rotate3d(1, 1, 1, 360deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main">
            <div class="te test1">
                1
                <div>
                    test
                    <span>spantest</span>
                </div>
            </div>
            <div class="te test2">
                2
                <div>
                    cdescsdvdsvdssfvdkbgjanlk
                    谢看极才的回，至畴至人便他又，说亓德一。
                    dvdddbdfsnv
                </div>
                <div>
                    4cd5sv45s5
                </div>
            </div>
            <div class="te test3">3</div>
            <div class="te test4">4</div>
            <div class="te test5">555555555</div>
            <div class="te test6">6</div>
            <div class="te test7">7</div>
            <div class="te test8">8888888888888</div>
            <div class="te test9">9</div>
            <!-- <div class="te test10">10</div> -->
        </div>
    </div>
</body>

</html>